<template>
  <div class="footer">
    <div class="fat">
      <section class="partner">
        <ul>
          <li><h2>关于empty</h2>
          <li><router-link to="/resume">个人简历</router-link></li>
          <li><router-link to="/messageBoard">给我留言</router-link></li>
          <li><h2>相关技术</h2></li>
          <li><a href="https://cn.vuejs.org/" target="_blank">Vue.js</a></li>
          <li><a href="https://nodejs.org/en/" target="_blank">Node.js</a></li>
        </ul>
      </section>
      <section class="links">
        <h2>友情链接</h2>
        <ul>
          <li><a href="https://github.com/" target="_blank">github</a></li>
          <li><a href='https://stackoverflow.com/' target='_blank'>Stack Overflow</a></li>
          <li><a href='https://juejin.im/' target='_blank'>掘金</a></li>
          <li><a href='https://www.proginn.com/' target='_blank'>程序员客栈</a></li>
          <li><a href='https://www.nowcoder.com/' target='_blank'>牛客网</a></li>
          <li><a href='https://www.freecodecamp.org/' target='_blank'>Web开发练习题</a></li>
          <li><a href='https://www.runoob.com/' target='_blank'>菜鸟教程</a></li>
          <li><a href='https://css-weekly.com/' target='_blank'>css优质内容</a></li>
          <li><a href='https://leetcode.com/' target='_blank'>leetcode</a></li>
        </ul>
      </section>
      <section class="contact">
        <div class="weixin">
          <div class="weixinImg">
            <img src="../assets/img/weixin.png" alt="加载失败">
          </div>
          <div>微信</div>
        </div>
      </section>
    </div>
    <div class="copright">
      empty
      <a>个人博客</a>
      <span>本站采用....</span>
      <span>
        <a>ICP备0000000000号</a>
        <a>公网0000000000号</a>
      </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Footer"
  }
</script>

<style scoped lang="less">
  a {
    color: #999999;
    font-size: 12px;
  }
  
  .footer {
    width: 100%;
    background: #242221;
    padding-top: 20px;
    
    .fat {
      width: 1200px;
      margin: auto;
      display: flex;
      justify-content: space-around;
      padding-bottom: 30px;
      
      .partner {
        width: 120px;
        
        ul {
          border-right: 1px #fff solid;
          padding-right: 50px;
          box-shadow: 1px 0 0 #000;
          
          li {
            margin-top: 10px;
            text-align: right;
            width: 100px;
            text-align: right;
            
            h2 {
              font-weight: bold;
              width: 100px;
              text-align: right;
            }
          }
        }
      }
      
      .links {
        width: 600px;
        margin-left: -50px;
        
        h2 {
          font-weight: bold;
          margin: 10px 0;
        }
        
        li {
          width: 100px;
          height: 30px;
          background: #393939;
          line-height: 30px;
          text-align: center;
          float: left;
          margin: 5px;
        }
      }
      
      .contact {
        h2 {
          font-weight: bold;
          margin-top: 10px;
        }
        
        p {
          color: #999999;
          font-size: 12px;
          margin: 10px 0;
        }
      }
    }
    .copright{
      background: #141414;
      line-height: 50px;
      height: 50px;
      text-align: center;
      width: 100%;
      color: #f16e50;
      font-size: 12px;
      a,span{
        color: #f16e50;
      }
    }
    
  }
  .weixin{
    text-align: center;
    margin-left: -100px;
    .weixinImg{
      width: 100px;
      height: 100px;
      text-align: center;
      margin: 30px 0 5px 0;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }



</style>
